<template>
  <div class="syn">
    <div class="nei-1">
      <div
        v-for="(item, index) in arr"
        :key="index"
        class="syu-1"
        @click="add(item)"
        :class="{ actve: actve === index }"
      >
        <div class="shan-1">
          {{ item.name }}
        </div>
      </div>
    </div>

    <div class="inp-1">
      <el-input v-model="input" placeholder="请搜索应用名称" clearable />
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
  </div>
  <div class="nen-1" v-if="store.flag === 1">
    <div v-if="isFixed" class="zuo-1-placeholder"></div>
    <div class="zuo-1" ref="leftNavRef">
      <div
        v-for="(item, index) in arrsk"
        :key="index"
        class="btn-1"
        @click="scrollToLetter(item.name)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="sco-1">
      <CardList
        v-for="(item, index) in arrsk"
        :key="index"
        :name="item.name"
        :values="item.value"
      ></CardList>
    </div>
  </div>
  <div class="middle min-1" v-if="store.flag === 2">
    <CardList :values="praise"></CardList>
  </div>
  <div class="middle min-1" v-if="store.flag === 3">
    <CardList :values="people"></CardList>
  </div>
  <div class="middle min-1" v-if="store.flag === 4">
    <CardList :values="sequence"></CardList>
  </div>
</template>

<script lang="ts" setup>
import { scrollToElement } from '@/utils/Transition'
import CardList from './CardList.vue'
import { useUserStore } from '@/stores/modules/user'
import type { additionalProperties1 } from '@/services/types/Applic'
const store = useUserStore()
const input = ref('')
const arr = [
  {
    name: '综合',
    flag: 1
  },
  {
    name: '口碑',
    flag: 2
  },
  {
    name: '人气',
    flag: 3
  },
  {
    name: '上线时间',
    flag: 4
  }
]
defineProps<{
  arrsk?: Array<any>
  praise?: additionalProperties1
  people?: additionalProperties1
  sequence?: additionalProperties1
}>()
const actve = ref(0)
const add = (item: any) => {
  actve.value = arr.indexOf(item)
  store.setFlag(item.flag)
}
const emit = defineEmits<{
  (e: 'search', input: string): void
}>()
const search = () => {
  emit('search', input.value)
}
const scrollToLetter = (letter: any) => {
  const section = document.getElementById(`section-${letter}`)
  if (section) {
    scrollToElement(section)
  }
}
const leftNavRef = ref<HTMLElement | null>(null) // 明确声明类型为HTMLElement或null
const leftNavOffset = ref(0) // 初始偏移量，代表左侧导航距离页面顶部的位置
// 添加一个响应式的属性来控制是否需要添加一个占位元素
const isFixed = ref(false)
onMounted(() => {
  if (leftNavRef.value) {
    // 获取初始偏移量
    leftNavOffset.value = leftNavRef.value.offsetTop
  }

  window.addEventListener('scroll', handleScroll)
  store.setFlag(1)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

const handleScroll = () => {
  if (leftNavRef.value) {
    const shouldFix = window.scrollY > leftNavOffset.value
    if (shouldFix && !isFixed.value) {
      leftNavRef.value.classList.add('fixed')
      isFixed.value = true
    } else if (!shouldFix && isFixed.value) {
      leftNavRef.value.classList.remove('fixed')
      isFixed.value = false
    }
  }
}
</script>

<style lang="scss" scoped>
.syn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.nei-1 {
  display: flex;
}
.syu-1 {
  width: 80px;
  height: 35px;
  border: 1px solid #cccccc;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  margin-top: 40px;
  margin-bottom: 20px;
  box-sizing: border-box;
  &:nth-child(4) {
    position: relative;
  }
}

.inp-1 {
  display: flex;
}
.actve {
  background: #1384e2;
  color: #fff;
}
.nen-1 {
  display: flex;

  .zuo-1 {
    width: 30px;
    height: 100%;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.btn-1 {
  margin: 3px 0;
  cursor: pointer;
}
.sco-1 {
  width: 1200px;
  margin-left: 20px;
}
.fixed {
  position: fixed;
  top: 0; // 或者是你希望的距顶部的距离
  width: 30px;
  height: unset !important;
}
.zuo-1-placeholder {
  width: 30px; // 定义与.zuo-1相同的宽度
  flex-shrink: 0; // 防止.placeholder缩小
  height: 100%; // 定义与.zuo-1相同的高度
}
.min-1 {
  height: 100%;
  background: #f5f5f5;
}
.ico-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shan-1 {
  display: flex;
  font-size: 14px;
  align-items: center;
  justify-content: center;
}
.pai-1 {
  position: absolute;
  top: 35px;
  left: 0;
  width: 80px;
  height: 60px;
  background: #fcfcfc;
  border: 1px solid #b9b9b9;
  cursor: pointer;
  border-radius: 5px;
  box-sizing: border-box;
}
.pai-2 {
  width: 100%;
  height: 25px;
  &:hover {
    background: #f5f5f5;
  }
}
.dfon {
  display: none;
}
</style>
